<template>
    <view>
        <view :class="['jk-as-mask', 'jk-class-mask',  {'jk-as-mask-show': visible} ]" @tap="handleClickMask"></view>
        <view :class="['jk-as', {'jk-as-show': visible}]">
            <view class="jk-as-header jk-class-header">
                <slot name="header"></slot>
            </view>
            <view class="jk-as-actions">
                <view class="jk-as-action-item" v-for="(item,index) in actions " :key="item.name">
                    <button class="jk-as-cancel-bt" @click="handleClickItem" :data-index="index" :open-type="item.openType" plain="true">
                        <view class="jk-as-btn-loading" v-if="item.loading"></view>
                        <jk-icon v-if="item.icon" :type="item.icon" class="jk-as-btn-icon"></jk-icon>
                        <view class="jk-as-btn-text" :style="item.color ? 'color: ' + item.color : '' ">{{ item.name }}11</view>
                    </button>
                </view>
            </view>
            <view class="jk-as-cancel" v-if="showCancel === true">
                <button @click="handleClickCancel" class="j-as-cancel-bt">{{ cancelText }}</button>
            </view>
        </view>
    </view>
    

</template>

<script>
    import JkIcon from '../../icon/index.js'
    export default {
        name: "ActionSheet",
        props: {
            visible: {
                type: Boolean,
                default: false
            },
            maskClosable: {
                type: Boolean,
                default: true
            },
            showCancel: {
                type: Boolean,
                default: false
            },
            cancelText: {
                type: String,
                default: '取消'
            },
            actions: {
                type: Array,
                default () {
                    return []
                }
            }
        },
        components: { JkIcon },
        data() {
            return {

            };
        },
        methods: {
            handleClickMask() {
                if (!this.maskClosable) return;
                this.handleClickCancel();
            },
            handleClickItem ({ currentTarget = {} }) {
                let dataset = currentTarget.dataset || {};
                const { index } = dataset;
                this.$emit('click', index );
            },
            handleClickCancel() {
                this.$emit('cancel', {});
            }
        }
    }
</script>

<style>
    .jk-as {
        position: fixed;
        width: 100%;
        box-sizing: border-box;
        left: 0;
        right: 0;
        bottom: 0;
        background: #f7f7f7;
        transform: translate3d(0, 100%, 0);
        transform-origin: center;
        transition: all .2s ease-in-out;
        z-index: 900;
        visibility: hidden
    }

    .jk-as-show {
        transform: translate3d(0, 0, 0);
        visibility: visible
    }

    .jk-as-mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .7);
        z-index: 900;
        transition: all .2s ease-in-out;
        opacity: 0;
        visibility: hidden
    }

    .jk-as-mask-show {
        opacity: 1;
        visibility: visible
    }
    .jk-as-actions{
        background-color: #FFFFFF;
    }
    .jk-as-action-item {
        position: relative
    }

    .jk-as-action-item::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        transform: scale(.5);
        transform-origin: 0 0;
        pointer-events: none;
        box-sizing: border-box;
        border: 0 solid #e9eaec;
        border-bottom-width: 1px;
    }

    .jk-as-header {
        background: #fff;
        text-align: center;
        position: relative;
        font-size: 12px;
        color: #80848f;
    }

    .jk-as-header::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        transform: scale(.5);
        transform-origin: 0 0;
        pointer-events: none;
        box-sizing: border-box;
        border: 0 solid #e9eaec;
        border-bottom-width: 1px;
    }

    .jk-as-cancel {
        margin-top: 6px;
        position: relative;
        background-color: #FFFFFF;
    }
    
    .jk-as-cancel-bt{
        border-color: transparent !important;
        border-radius: 0;
    }

    .jk-as-btn-loading {
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
        width: 12px;
        height: 12px;
        background: 0 0;
        border-radius: 50%;
        border: 2px solid #e5e5e5;
        border-color: #666 #e5e5e5 #e5e5e5 #e5e5e5;
        animation: btn-spin .6s linear;
        animation-iteration-count: infinite;
    }

    .jk-as-btn-text {
        display: inline-block;
        vertical-align: middle;
    }

    .jk-as-btn-icon {
        font-size: 14px !important;
        margin-right: 4px;
    }

    @keyframes btn-spin {
        0% {
            transform: rotate(0);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>
